<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .box{
            width: 400px;
            margin: 50px auto;
        }
        .music li{
            width: 400px;
            display: flex;
            margin-bottom: 20px;
        }
        .content{
            width: 250px;
        }
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <!-- 定义挂载点 -->
    <div id="app">
        <div class="box">
            <ul class="music">
                <li v-for="(item,index) in toplist" >
                    <div class="content">
                        <h2>{{item.title}}</h2>
                        <ul>
                            <li v-for="item2 in item.songlist" :key="item2.id">{{item2.name}}</li>
                        </ul>
                    </div>
                    <img :src="item.img" alt="">
                </li>
            </ul>
        </div>
    </div>

    <script>
        new Vue({
            //挂载点
            el: "#app",
            //数据
            data: {
                toplist: [
                    {
                        title: "飙升榜",
                        img: "https://y.gtimg.cn/music/photo_new/T003R300x300M000004P1mcb2xwTF6.jpg?max_age=2592000",
                        songlist: [
                            {
                                id: 1,
                                name: "你要我如何我就如何",
                                singger: "大弯区。。。",
                            },
                            {
                                id: 2,
                                name: "丑八怪",
                                singger: "薛之谦",
                            },
                            {
                                id: 3,
                                name: "模特",
                                singger: "李荣浩。",
                            },
                        ],
                    },
                    {
                        title: "新歌榜",
                        img: "https://y.gtimg.cn/music/photo_new/T003R300x300M000002E7NcK3tHpS2.jpg?max_age=2592000",
                        songlist: [
                            {
                                id: 11,
                                name: "你要我如何我就如何1",
                                singger: "大弯区。。。",
                            },
                            {
                                id: 21,
                                name: "丑八怪1",
                                singger: "薛之谦",
                            },
                            {
                                id: 31,
                                name: "模特1",
                                singger: "李荣浩。",
                            },
                        ],
                    },
                    {
                        title: "原创榜",
                        img: "https://y.gtimg.cn/music/photo_new/T003R300x300M000003DdY3E3GdCE2.jpg?max_age=2592000",
                        songlist: [
                            {
                                id: 12,
                                name: "你要我如何我就如何2",
                                singger: "大弯区。。。",
                            },
                            {
                                id: 22,
                                name: "丑八怪2",
                                singger: "薛之谦",
                            },
                            {
                                id: 32,
                                name: "模特2",
                                singger: "李荣浩。",
                            },
                        ],
                    },
                    {
                        title: "热歌榜",
                        img: "https://y.gtimg.cn/music/photo_new/T003R300x300M000001V7Gsi01BwcI.jpg?max_age=2592000",
                        songlist: [
                            {
                                id: 15,
                                name: "你要我如何我就如何5",
                                singger: "大弯区。。。",
                            },
                            {
                                id: 25,
                                name: "丑八怪5",
                                singger: "薛之谦",
                            },
                            {
                                id: 35,
                                name: "模特5",
                                singger: "李荣浩。",
                            },
                        ],
                    },
                ],
            },

            //方法
            methods: {}
        })
    </script>
</body>

</html>